
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <#--<link rel="stylesheet" href="/assets/layui/css/layui.css">-->
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.css">
    <link rel="stylesheet" href="/assets/layui/css/style.css">
    <link rel="icon" href="/assets/layui/images/img/code.png">
    <style type="text/css">

        body {
            background-image: url("/assets/layui/images/img/loginBackground.jpg");
            background-size: cover;
            width: 100%;
            height: 100%;
        }
        .title{
            font-size: 42px;
            color: #ffffff;
            letter-spacing:4px;
        }
        .kuang{
            width: 400px;
            height: 285px;
            border-radius:5px;
            background-color: #ffffff;
            opacity: 0.2;
            position:absolute;left: 28%;
        }
        .tijiaoButton{
            width: 330px;
            height:40px;
            background-color: #3f558e;
            border: none;
            border-radius: 2px;
        }
        .am-btn-primary:hover,
        .am-btn-primary:focus,
        .am-btn-primary:active,
        .am-btn-primary.am-active,
        .am-dropdown.am-active .am-btn-primary.am-dropdown-toggle {
            color: #fff;
            background-color: #4d67aa;
        }

    </style>
    <script type="text/javascript">
        if(self!=top){
            top.location.href = '/login'
        }
    </script>
</head>
<body>

<div class="am-g" style="margin: 11% auto 0">
    <div class="am-u-sm-0 am-u-md-0 am-u-lg-2">
        &nbsp;
    </div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-8">
        <div class="am-u-sm-2 am-u-md-3 am-u-lg-3" align="right" style="right: -90px">
            <img src="/assets/layui/images/img/diboLogo.png" style="padding: 10px 0 0 0;"/>
        </div>
        <div class="am-u-sm-10 am-u-md-9 am-u-lg-9" style="left: 80px">
                <span class="title">地下入侵报警管理系统
                </span>
        </div>
    </div>
    <div class="am-u-sm-0 am-u-md-0 am-u-lg-2">
        &nbsp;
    </div>
</div>
<div class="am-g" style="margin-top: 80px ">
    <div class="am-u-sm-0 am-u-md-2 am-u-lg-3">
        &nbsp;
    </div>
    <div class="am-u-sm-12 am-u-md-8 am-u-lg-6">
        <div class="kuang">
        </div>
        <div style="position:relative;left: 31%;top:55px">
            <form class="am-form" method="post" action="/login">
                <div class="am-form-group">
                    <input type="text" name="username" placeholder="请输入用户名" style="width: 330px;height: 42px;border: none;border-radius: 2px">
                </div>
                <div class="am-form-group" style="padding-bottom: 10px">
                    <input type="password"  name="password"  placeholder="请输入密码" style="width: 330px;height: 42px;border: none;border-radius: 2px">
                </div>

                <button type="submit" class="am-btn am-btn-primary tijiaoButton">登录</button>

            </form>
        </div>
    </div>
    <div class="am-u-sm-0 am-u-md-2 am-u-lg-3">
        &nbsp;
    </div>
</div>



<script src="/assets/layui/jquery-3.2.0.min.js"></script>
<script src="/assets/layui/layui.js"></script>
<script type="text/javascript">
    var errori ="${(errorMsg)!}";
    if(errori!=""){
        layui.use('layer', function () {
            var layer = layui.layer;
           layer.msg(errori, {time: 3000, icon:2,area: ['180px', '70px']})
        })
    }
</script>
</body>
</html>